<template>
    <view class="flex align-center border-grey round padding-lr-base">
        <view style="flex: 1; height: 60rpx" class="flex align-center justify-between">
            <view class="cuIcon-search text-lg margin-right-base"></view>
            <input :value="modelValue" style="flex: 1" type="text" :placeholder="placeholder" @input="handleInput" />
            <view v-if="modelValue" @click="clear" style="width: 60rpx" class="flex justify-end">
                <view class="icon-guanbi1 text-sm"></view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useSystemStore } from "@/store/module/system";

interface inputType {
    modelValue: string; // 值
    placeholder?: string; // 文字
}
const props = withDefaults(defineProps<inputType>(), {
    modelValue: "",
    placeholder: "请输入关键字"
});
const systemStore = useSystemStore();

const emit = defineEmits(["update:modelValue", "change"]);

const handleInput = (e: any) => {
    emit("update:modelValue", e.detail.value);
    emit("change", e.detail.value);
};

const clear = () => {
    emit("update:modelValue", "");
    emit("change", "");
};
</script>

<style lang="scss" scoped></style>
